<template>
    <div id="login">
        <div class="box">
            <div id="logo">
                <el-image :src="logo" fit="scale-down" style="width: 160px; height: 260px" />
            </div>
            <div id="selectLoginType">
                <el-tabs id="loginType" style="height: 100%" type="border-card">
                    <el-tab-pane label="账号密码登陆" style="height: 100%">
                        <el-form ref="loginFormRef"
                                 :model="loginForm"
                                 label-position="left"
                                 label-width="80px" size="large">
                            <el-form-item label="用户名" prop="username">
                                <el-input
                                    v-model="loginForm.username"
                                    clearable
                                    placeholder="请输入账号"
                                    style="width: 240px"
                                />
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input
                                    v-model="loginForm.password"
                                    placeholder="请输入密码"
                                    show-password
                                    style="width: 240px"
                                    type="password"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 240px" type="danger" @click="login">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>

                    <el-tab-pane label="其他方式登陆">
                        <el-form>
                            <el-form-item>
                                <el-button style="width: 240px" type="warning" @click="loginByGitee">GITEE</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 240px" type="primary">QQ</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 240px" type="success">微信</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import logo from "@/assets/img/logo.jpg";
import { LoginApi } from "@/api/login/LoginApi.ts";
import router from "@/router/router.ts";
import { ElMessage } from "element-plus";
import { useLocalStore } from "@/store/UseLocaStore.ts";
import { UserLoginVo } from "@/model/LoginModel.ts";

/**
 * 登录表单数据
 */
const loginForm = ref({
    username: "" as string,
    password: "" as string,
});
/**
 * 根据账号密码登陆
 */
const login = () => {
    LoginApi.userLoginByUsernameAndPassword(loginForm.value.username, loginForm.value.password)
        .then(res => {
            //登录成功在LocalStorage中保存用户信息
            useLocalStore().setUserInfoVo(res.data[0] as UserLoginVo);
            //跳转到首页
            router.push("/home");
        });
};
/**
 * Gitee登陆
 */
const loginByGitee = () => {
    ElMessage.info("暂未实现");
};
</script>

<style lang="scss" scoped>
#login {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: #646cff;
    //背景图片
    background-image: url("@/assets/img/login_bg.png");
    background-size: 100% 100%;

    .box {
        width: 600px;
        height: 300px;
        background-color: #fff;
        //定位到屏幕最右边
        position: absolute;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 auto;
        padding: 20px;
        //居中

        //圆角
        border-radius: 10px;
        display: flex;

        #logo {
            width: 35%;
        }

        #selectLoginType {
            width: 65%;
            //左侧自定义颜色垂直边框
            border-left: 2px solid #a6e4fa;

        }
    }
}
</style>